<template>
	<div class="detaile-choose-info mt16">
		<div class="chooseinfo-select">
			<div class="service-car h_box flex_pjustify">
				<div class="service-car-title">服务车辆</div>
				<div class="service-car-content">
					<a>
						<span><em>别克凯越</em>   <em>1.8L</em>   <em>2016款</em></span>
						<span> > </span>
					</a>
				</div>
			</div>
			<div class="service-car h_box flex_pjustify">
				<div class="service-car-title">已选</div>
				<div class="service-car-content">
					<a @click="showSpec">
						<span><i class="no-adaptation">不适配</i><span class="service-car-content-txt"><em>嘉实多</em> / <em>全合成</em> / <em>4L</em></span></span>
						<span> > </span>
					</a>
				</div>
			</div>
			<div class="service-car h_box flex_pjustify">
				<div class="service-car-title">服务门店</div>
				<div class="service-car-content">
					<a>
						<span>{{storeInfo.storeName}} <em class="lose">9.5折</em></span>
						<span> > </span>
					</a>
				</div>
			</div>
			<div class="explain clearfix">
				<div class="explain-content h_box"><em class="tip-icon"></em><span>该服务涉及门店根据车辆车型备货,仅限预约次日服务，请准确选择车辆信息</span></div>
			</div>
		</div>
		<spu-common v-show="spec"></spu-common>
	</div>
</template>

<script>

import spuCommon from '../common/spu-common';

export default {
	data() {
		return {
			spuInfo : {},  // 商品
			storeInfo : { // 门店
				storeName: '正在加载中...'
			}, 
			spec: '', // 已选 功能
			// saleAttrList: ['a', 'b', 'c'], // sup-common
		}
	},
	components: {
		spuCommon
	},
	methods: {

		// 已选
		showSpec() {
			
			if (this.spec == '') {
				this.spec = 'spuCommon';
			}else {
				this.$broadcast('spu-common-show', 1); // 0未选中 1选中  2不存在
			}

		}	
	},
	events: {

		//  设置消息
		chooseInfoDataEvent: function ( chooseInfo ) {

			if ( chooseInfo ) {
				this.spuInfo = chooseInfo.spuInfo;
				this.storeInfo =  chooseInfo.storeInfo;
				this.$broadcast('spuCommonDataEvent', this.spuInfo);
			}

		}
	}
}

</script>

<style lang="scss">
	
@import '../../assets/css/_variables.scss';
@import '../../assets/css/_functions.scss';

	.detaile-choose-info {
		background: $_fff;
		.chooseinfo-select {
			padding-left: rem(12);
		}
		font-size: 13px;
		.service-car {
			height: rem(44);
			line-height: rem(44);
			border-bottom: 1px solid #c8c7cc;
			.service-car-title {
				font-size: rem(14);
			}
			.service-car-content {
				margin-right: rem(12);
				.lose {
					background: $_ff6600;
					color: $_fff;
					border-radius: rem(2);
					padding: rem(1);
					font-size: rem(10);
				}
				.no-adaptation {
					background: $_ff0000;
					color: $_fff;
					font-size: rem(10);
					margin-right: rem(8);
					padding: 0 rem(2);
				}
				.service-car-content-txt {
					color: $_ff0000;
				}
				a {
					color: $_333;
				}
			}
		}
		.explain {
			line-height: rem(40);
			.explain-content {
				padding-top: rem(10);
				padding-bottom: rem(13);
				line-height: rem(20);
				color: $_999;
				font-size: rem(13);
				padding-right: rem(12);
				.tip-icon {
					display: inline-block;
					width: rem(20);
					height: rem(32);
					margin-right: rem(2);
					margin-top: rem(4);
					text-align: center;
					line-height: rem(16);
					font-size: rem(12);
					background:  url('../../assets/images/tip-icon.png') no-repeat;
				}
			}
		}
	} 	
</style>